<template>
  <el-row class="bgf">
    <el-col :span="12" :offset="5">
      <!-- model表单的数据 -->
      <!-- rules：校验规则 -->
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-form"
      >
        <!-- prop="type"校验 ，v-model="form.type"传值-->
        <el-form-item label="一级分类" prop="first_cateid">
          <el-select v-model="form.first_cateid" @change="firstChange">
            <el-option
              v-for="(item, index) in firstCateList"
              :key="index"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" prop="second_cateid">
          <el-select v-model="form.second_cateid">
            <el-option
              v-for="(item, index) in secondCateList"
              :key="index"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsname">
          <el-input v-model="form.goodsname"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <el-upload
            action="#"
            list-type="picture-card"
            :on-exceed="limitImg"
            :auto-upload="false"
            :limit="1"
            :on-change="handleChange"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <!-- <el-upload list-type="picture-card">
            <i class="el-icon-plus"></i>
          </el-upload> -->
        </el-form-item>
        <el-form-item label="商品规格属性" prop="specsattr">
          <!-- 下拉框的多选 -->
          <el-select v-model="form.specsattr" multiple placeholder="请选择">
            <el-option
              v-for="item in cateListOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="$route.params.id > 0"
            type="primary"
            @click="submitForm('form')"
            >立即修改</el-button
          >
          <el-button v-else type="success" @click="submitForm('form')"
            >立即添加</el-button
          >
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import { getCateList } from "../../request";
export default {
  data() {
    return {
      firstCateList: [],
      secondCateList: [],
      form: {
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        img: "",
        status: 1,
        specsattr: [],
      },
      rules: {
        first_cateid: [
          { required: true, message: "请输入一级分类", trigger: "blur" },
        ],
        second_cateid: [
          { required: true, message: "请输入二级分类", trigger: "blur" },
        ],
        form: {
          first_cateid: 0,
          second_cateid: 0,
          img: "",
          status: 1,
        },
      },
      // 上级分类的下拉菜单
      cateListOption: [
        { lable: "1", value: 1 },
        { lable: "2", value: 2 },
        { lable: "3", value: 3 },
      ],
      fileList: [],
    };
  },
  created() {
    // 发请求获取一级分类的数据
    this.getFirstCateList();
    this.firstChange();
    // 判断新增还是修改
    if (this.$route.params.id > 0) {
      // 有params说明是修改，发请求
      this.getDataById(this.$route.params.id);
    }
  },
  watch: {},
  methods: {
    // 请求一级分类数据
    async getFirstCateList() {
      let res = await getCateList();
      this.firstCateList = res.data.list;
    },
    // 文件上传-修改文件
    handleChange(file, fileList) {
      // 当文件变化时，将最终的值传给img
      this.form.img = file.raw;
    },
    // 超出上限提示
    limitImg() {
      this.$message.warning("分类图片最多添加1个");
    },

    // 监听一级分类的修改，获取二级分类的数据
    async firstChange() {
      this.form.second_cateid = "";
      // // 发请求获取二级分类的数据，通用的方法
      // let res = await getSecondCateList(this.form.first_cateid);
      // this.secondCateList = res.data.list;
      // ====================================
      // 不发请求的方式,这个项目中已经有了完整的数据，所以可以不发请求，前端自己做筛选
      this.firstCateList.forEach((item) => {
        if (item.id == this.form.first_cateid) {
          this.secondCateList = item.children ? item.children : [];
        }
      });
    },
  },
};
</script>
